<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 引入样式 -->
<link href="https://unpkg.com/layui@2.9.6/dist/css/layui.css" rel="stylesheet">

<script src="//unpkg.com/layui@2.9.6/dist/layui.js"></script>
<script src="https://unpkg.com/axios@1.6.5/dist/axios.min.js"></script>

<title>LayUISample1</title>
</head>
<body>

    <div id="app" class="layui-row">

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <br>
        </div>

        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">

            <div class="layui-btn-container">
                <button type="button" class="layui-btn">默认按钮</button>
                <button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
                <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
                <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
                <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
                <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
            </div>

            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
                <button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
                <button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
                <button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
                <button class="layui-btn layui-btn-primary layui-border-purple">紫色按钮</button>
                <button class="layui-btn layui-btn-primary layui-border">普通按钮</button>
            </div>

        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <br>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th>人物</th>
                        <th>民族</th>
                        <th>格言</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>孔子</td>
                        <td>华夏</td>
                        <td>有朋自远方来，不亦乐乎</td>
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>华夏</td>
                        <td>穷则独善其身，达则兼济天下</td>
                    </tr>
                </tbody>
            </table>


            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="A" value="" placeholder="Field A"
                            class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="B" placeholder="Field B"
                            lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="C" readonly placeholder="Field C"
                            class="layui-input demo-table-search-date">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
                    <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
                </div>
            </form>

            <table class="layui-table" id="ID-table-demo-search">

            </table>


            <table class="layui-table" lay-data="{height:600, url:'//layuiSample', page:true,limit:20}" id="ID-table-demo-init">
              <thead>
                <tr>
                  <th lay-data="{field:'name', width:200, sort: true}">名字</th>
                  <th lay-data="{field:'href', width:300}">链接</th>
                  <th lay-data="{field:'type', width:100, sort: true}">类型</th>
                </tr>
              </thead>
            </table>
        </div>


    </div>
    
    
<script>

function testPost(){
    axios.post('/layuiSample',{
        test:1
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}   

function testGet(){
    axios.get('/layuiSample',{
        params : {
            test:1
         }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
}  

</script>

<script>


layui.use(function(){
      var table = layui.table;
      var form = layui.form;
      var laydate = layui.laydate;
      // 创建表格实例
      table.render({
        elem: '#ID-table-demo-search',
        url: '/layuiSampleSearch', // 此处为静态模拟数据，实际使用时需换成真实接口
        cols: [[
          {field:'name', title: '名字', width:200},
          {field:'href', title: '链接', width:300},
          {field:'type', title: '类型', width:100}
        ]],
        page: true,
        limit: 20,
        height: 600
      });
      // 日期
      laydate.render({
        elem: '.demo-table-search-date'
      });
      // 搜索提交
      form.on('submit(demo-table-search)', function(data){
        var field = data.field; // 获得表单字段
        console.log(field);
        // 执行搜索重载
        table.reload('ID-table-demo-search', {
          page: {
            curr: 1 // 重新从第 1 页开始
          },
          where: field // 搜索的字段
        });
        layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
        return false; // 阻止默认 form 跳转
      });
    });
        
    
                    

</script>    
    
    
</body>
